<template lang="jade">
  .league-item(@click='callback(league.name)')
    img(:src="league.img", :alt="league.alt")
    p.league-item-name {{league.name}}
</template>

<style lang="less" scoped>
  .league-item{
    float: left;
    width: 65pt;
    height: 68pt;
    border: 1px solid #fff;
    box-sizing: border-box;
    margin-right: 6pt;
    margin-bottom: 25pt;
    text-align: center;
    img{
      width: 52pt;
      left: 0;
      right: 0;
      display: block;
      margin: auto;
    }
    &-name{
      position: relative;
      color: #fff;
      font-size: 10pt;
      &:after{
        display: inline-block;
        content: '';
        width: 4pt;
        height: 4pt;
        position: absolute;
        top: 5pt;
        right: 8pt;
        border-right: 1pt solid #fff;
        border-bottom: 1pt solid #fff;
        transform: rotate(-45deg);
      }
    }
  }
    
</style>

<script>
  export default {
    props: ['league', 'callback']
  }
</script>